<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation({id:0})">新增</Button>
            <Table size="small" :loading="tableLoading" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="+row.status === 1" status="success" text="正常" />
                    <Badge v-if="+row.status === 0" status="error" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation(row)">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
            <Page
                show-total
                show-elevator
                show-sizer
                :total="total"
                :current.sync="params.page"
                :page-size="params.pageSize"
                :page-size-opts="pageOpts"
                @on-change="formSize" transfer
                @on-page-size-change="formChangePage"
            />
            </div>
        </Card>
        <Modal v-model="modal" :title="edit ? '编辑' : '新增'" :mask-closable="false" @on-cancel="handleDrawerCancel()">
            <Form :model="formItem" :rules="ruleValidate" ref="formItem" :label-width="80">
                <FormItem label="姓名" prop="name">
                   <Input v-model="formItem.name" placeholder="请输入" clearable></Input>
                </FormItem>
                <FormItem label="关联诊室" prop="sortNum">
                    <Select
                        v-model="formItem.clinic_id"
                        clearable
                        remote
                    >
                        <Option
                        v-for="item in doctorArr"
                        :value="item.id"
                        :key="item.value"
                        :disabled="+item.disabled === 1"
                        >{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="状态" prop="switch">
                    <i-switch v-model="formItem.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { clinicdoctorlist, clinicdoctorinfo, clinicdoctorcreate, clinicdoctorupdate } from '@api/doctor';
    export default {
        name: 'doctor',
        data() {
            return {
                // 请求参数
                params: {
                    page: 1,
                    pageSize: 10
                },
                total: 0,
                pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
                modal: false,
                edit: false,
                loading: false,
                tableLoading: false,
                formItem: {
                    id: undefined,
                    name: '',
                    clinic_id: "",
                    status: true
                },
                doctorArr: [],
                ruleValidate: {
                    name: [
                        { required: true, message: '医生姓名不可为空', trigger: 'blur' }
                    ],
                },
                columns: [
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '关联诊室',
                        key: 'clinic_name'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [],
            }
        },
        
        mounted () {
            this.initial();
        },
        methods: {
            initial(){
                this.askData()
            },
            askData() {
                clinicdoctorlist(this.params).then(res=>{
                    this.data = res.list
                    this.total = res.total
                })
            },
            /* @函数功能: 分页 */
            formSize(e) {
            this.params.page = e;
            this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage(e) {
            this.params.pageSize = e;
            this.askData();
            },
            handleAllocation(row) {
                if (row.id === 0) this.edit = false;
                else this.edit = true;
                this.modal = true;
                clinicdoctorinfo({id:row.id}).then(res=>{
                    this.doctorArr = res.condition.clinic_list
                    this.formItem.id = res.id
                    this.formItem.clinic_id = +res.clinic_id===0?'':res.clinic_id+""
                    this.formItem.name = res.name
                    this.formItem.status = +res.status === 1
                })
            },
            handleDrawerCancel() {
                this.modal = false;
                this.edit = false;
                this.$refs['formItem'].resetFields()
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const params = {
                            id: this.formItem.id,
                            name: this.formItem.name,
                            status: this.formItem.status ? '1' : '0',
                            clinic_id: this.formItem.clinic_id
                        }
                        if (this.edit) {
                            this.updateSubmit(params);
                            console.log('编辑')
                        } else {
                            this.createSubmit(params);
                            console.log('新增')
                        }
                    }
                })
            },
            createSubmit(params) {
                clinicdoctorcreate(params).then((res) => {
                    this.$Message.success(' 创建成功');
                    this.loading = false;
                    this.askData();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            updateSubmit(params) {
                clinicdoctorupdate(params).then((res) => {
                    this.$Message.success(' 修改成功');
                    this.loading = false;
                    this.askData();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
        }
    }
</script>

<style scoped>
</style>